<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-05 09:08:11
 * @LastEditors: william
 * @LastEditTime: 2025-03-25 13:57:32
-->
<template>
  <div
    :id="mapId"
    v-loading="loading"
    class="map-container"
    :class="[mapType === 'GMAP' ? 'googleMap' : 'aMap']"
    style="height: 100%"
  >
    <MapLogo />
  </div>
</template>

<script setup>
import point from '@/assets/home/point.png'
import pointleve1 from '@/assets/home/pointLeve1.png'
import pointleve2 from '@/assets/home/pointLeve2.png'
import pointleve3 from '@/assets/home/pointLeve3.png'
import pointleve4 from '@/assets/home/pointLeve4.png'
import pointleve5 from '@/assets/home/pointLeve5.png'
import pointleve6 from '@/assets/home/pointLeve6.png'
import { getConnection } from '@/api/home'
import { MarkerClusterer } from '@googlemaps/markerclusterer'

const props = defineProps({
  satelliteMap: {
    type: Boolean,
    default: false // false-普通地图，true-卫星地图
  },
  mapId: {
    type: String,
    default: 'locationMap'
  },
  locationInfo: {
    type: Object,
    default: () => {}
  }
})

const loading = ref(false)
const zoom = 4
const marker = ref(null)
const infoWindow = ref('')
const circle = ref(null)
const { theme } = storeToRefs(useAppStore())
const baseMapMixin = useBaseMapMixin({
  satelliteMap: props.satelliteMap,
  mapId: props.mapId,
  zoom: zoom
})

watch(
  () => props.locationInfo,
  (nv, ov) => {
    baseMapMixin.initMapModel()
  },
  { deep: true }
)

watch(theme, (nv, ov) => {
  switchTheme()
})

onMounted(() => {
  nextTick(() => {
    baseMapMixin.initMapModel(new AMap.LngLat(116.39, 39.9))
    baseMapMixin.aMapScale.value.hide()
  })
})

const initMap = _ => {
  if (props.locationInfo && props.locationInfo.locationdata.length) {
    //
  }
}
</script>

<style lang="scss" scoped>
#locationMap {
  @extend .user-select-none;
}
</style>
